//页面中的数据
var data = [
  { id:1, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-06-11 21:00:00' },
  { id:2, name: "睡眠的时间越久对身体才越好吗？", src: '../images/liebiao.png', classify: '睡眠', user: 'admin', time: '2022-06-11 21:00:00' },
  { id:3, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-06-14 08:00:00' },
  { id:4, name: "睡眠的时间越久对身体才越好吗？", src: '../images/liebiao.png', classify: '睡眠', user: 'admin', time: '2022-06-11 21:00:00' },
  { id:5, name: "感冒了要多喝水对身体有好处吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-06-11 21:00:00' },
  { id:6, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-06-11 21:00:00' },
  { id:7, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-06-29 08:00:00' },
  { id:8, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-07-11 08:00:00' },
  { id:9, name: "感冒了要多喝水对身体有好处吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-07-12 08:00:00' },
  { id:10, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-07-12 08:00:00' },
  { id:11, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-07-12 08:00:00' },
  { id:12, name: "感冒了要多喝水对身体有好处吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-07-13 08:00:00' },
  { id:13, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-07-13 08:00:00' },
  { id:14, name: "睡眠的时间越久对身体才越好吗？", src: '../images/liebiao.png', classify: '睡眠', user: 'admin', time: '2022-07-13 08:00:00' },
  { id:15, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-07-13 08:00:00' },
  { id:16, name: "感冒了要多喝水对身体有好处吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-07-21 08:00:00' },
  { id:17, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-07-21 08:00:00' },
  { id:18, name: "睡眠的时间越久对身体才越好吗？", src: '../images/liebiao.png', classify: '睡眠', user: 'admin', time: '2022-07-21 08:00:00' },
  { id:19, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-07-21 08:00:00' },
  { id:20, name: "感冒了要多喝水对身体有好处吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-07-21 08:00:00' },
  { id:21, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-07-21 08:00:00' },
  { id:22, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-07-28 08:00:00' },
  { id:23, name: "睡眠的时间越久对身体才越好吗？", src: '../images/liebiao.png', classify: '睡眠', user: 'admin', time: '2022-07-28 08:00:00' },
  { id:24, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-07-28 08:00:00' },
  { id:25, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-07-28 08:00:00' },
  { id:26, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-07-28 08:00:00' },
  { id:27, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-08-01 08:00:00' },
  { id:28, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-08-01 08:00:00' },
  { id:29, name: "睡眠的时间越久对身体才越好吗？", src: '../images/liebiao.png', classify: '睡眠', user: 'admin', time: '2022-08-01 08:00:00' },
  { id:30, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-08-01 08:00:00' },
  { id:31, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-08-01 08:00:00' },
  { id:32, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-08-04 08:00:00' },
  { id:33, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-08-04 08:00:00' },
  { id:34, name: "睡眠的时间越久对身体才越好吗？", src: '../images/liebiao.png', classify: '睡眠', user: 'admin', time: '2022-08-04 08:00:00' },
  { id:35, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-08-04 08:00:00' },
  { id:36, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-08-04 08:00:00' },
  { id:37, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-08-05 08:00:00' },
  { id:38, name: "睡眠的时间越久对身体才越好吗？", src: '../images/liebiao.png', classify: '睡眠', user: 'admin', time: '2022-08-05 08:00:00' },
  { id:39, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-08-05 08:00:00' },
  { id:40, name: "发烧了要捂汗才能好的快吗？", src: '../images/liebiao.png', classify: '生活', user: 'admin', time: '2022-08-05 08:00:00' },
 
];
var page = 1;
//每页的条数
var count = 10;
//获取tbody
var oTBody = document.querySelector('tbody');
//获取分页容器
var oPagination = document.querySelector('.pagination');
//获取上一页的按钮
var oPrevBtn=document.querySelector('.prev')
//获取下一页的按钮
var oNextBtn=document.querySelector('.next')
var oSearchInp = document.querySelector('.searchInp');
console.log(oSearchInp)
var oSearchBtn = document.querySelector('.searchBtn');
//页面初始化的渲染功能
var oStartTime=document.querySelector('.startTime')
var oEndTime=document.querySelector('.endTime')
var search='';
function render() {
  var str=oSearchInp.value//获取搜索的内容
  console.log(str)
  var searchData=[];//搜索后的内容
  if(str.trim()==''){
    searchData=data;
  }else{
    for(var i=0;i<data.length;i++){
      if(data[i].name.includes(str)){
        searchData.push(data[i])
      }
    }
  }
  var start=oStartTime.value;
  var end=oEndTime.value;
  var renderData2=[];
  var t1=new Date(start).getTime();//获取时间戳
  var t2=new Date(end).getTime()
  if(start.trim()=='' || end.trim()==''){
    renderData2=searchData;
  }else{
    for(var i=0;i<searchData.length;i++){
      if(new Date(searchData[i].time).getTime()>=t1 &&
         new Date(searchData[i].time).getTime()<=t2)
         {
           renderData2.push(searchData[i])
         }
    }
  }


  //让table为空
  oTBody.innerHTML = '';
  //根据count和page准备要渲染的数据
  var renderArr = renderData2.slice((page - 1) * count, page * count);
  //循环要渲染的数据
  for (var i = 0; i < renderArr.length; i++) {
      //创建tr
      var oTr = document.createElement('tr');
      //给tr创建内容
      oTr.innerHTML = `
      <td><input type="checkbox" class='check' value='${renderArr[i].id}'></td>
     <td>${renderArr[i].name}</td>
      <td><img src='${renderArr[i].src}'></td>
      <td>${renderArr[i].classify}</td>
      <td>${renderArr[i].user}</td>
      <td>${renderArr[i].time}</td>
      <td>

     <button type="button"data-toggle="modal" data-target="#detailmodal">查看详情</button>
          <button class="edit">编辑</button>
          <button class="del">删除</button>
      </td>
  `
      oTBody.appendChild(oTr);
  }
//渲染页码
    //获取所有的页码
    var aPageBtn = document.querySelectorAll('.pageBtn');
    //删除所有的页码
    for(var i=0;i<aPageBtn.length;i++){
        oPagination.removeChild(aPageBtn[i].parentNode);
    }
    //根据数据的长度重新创建页码
    for (var i = 1; i <= Math.ceil(renderData2.length / count); i++) {
        //创建li
        var oLi = document.createElement('li');
        //给li创建内容
        oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
        //如果li和当前的页码一致，给他加一个选中的class
        if (i == page) {
            oLi.classList.add('active');
        }
        //在下一页的前面插入页码
        oPagination.insertBefore(oLi, oPagination.lastElementChild);
    }
}
render();

//给分页加事件
oPagination.addEventListener('click', changePage);
function changePage() {
    //如果当前点击的按钮有pageBtn这个class名字
    if (event.target.className == 'pageBtn') {
        //修改全局的page
        page = event.target.innerText;
        //渲染table，渲染分页
        render();
       oC.checked=false;
        n=0;
    }
}
//给上一页和下一页加事件
oPrevBtn.addEventListener('click',prev);
oNextBtn.addEventListener('click',next);
function prev(){
    if(page>1){
        page--;
        render();
        oC.checked=false;
        n=0;
    }
}
function next(){
    if(page<Math.ceil(data.length / count)){
        page++;
        render();
        oC.checked=false;
        n=0;
    } 
}

// 删除功能
oTBody.addEventListener("click", del);
var id;
function del() {
  if (event.target.className.includes("del")) {
    $("#delModal").modal("show");
    id = event.target.parentNode.parentNode.children[0].children[0].value;
  }
}
var delBtn = document.querySelector(".delBtn");
delBtn.addEventListener("click", sureDel);
function sureDel() {
  for (var i = 0; i < data.length; i++) {
    if (data[i].id == id) {
      //删除id所对应的数据
      data.splice(i, 1);
    }
  }
  $("#delModal").modal("hide");
  render();
  oC.checked = false;
  n = 0;
}
//批量删除
var allDel = document.querySelector(".alldel");
allDel.onclick = function () {
  var arr = [];
  var aInp = document.querySelectorAll(".check");
  //循环判定aInp，为true时，获取对应id放入数组arr
  for (var i = 0; i < aInp.length; i++) {
    if (aInp[i].checked == true) {
      arr.push(aInp[i].value);
    }
  }
  //双重for循环，删除对应id数据。
  for (var i = 0; i < arr.length; i++) {
    for (var j = 0; j < data.length; j++) {
      if (data[j].id == arr[i]) {
        data.splice(j, 1);
      }
    }
  }
  render();
  oC.checked = false;
  n = 0;
};

//列表展开
var aH6 = document.querySelectorAll("#nav h4");
var aUl = document.querySelectorAll("#nav ul");

for (var i = 0; i < aH6.length; i++) {
  aH6[i].onclick = function () {
    var oUl = this.nextElementSibling;

    if (getComputedStyle(oUl).height == "0px") {
      //清空样式
      for (var i = 0; i < aUl.length; i++) {
        aUl[i].style.height = "0px";
      }

      //ul的高度 = ul第一个孩子节点li的高度 * 所有li的长度
      oUl.style.height =
        oUl.children[0].offsetHeight * oUl.children.length + "px"; //offsetHeight获取的是占位大小：内容+padding+border
    } else {
      oUl.style.height = "0px";
    }
  };
}

// 全选功能
var oC=document.querySelector('.choose')
var n=0;
oC.onclick=function(){
  var aInp = document.querySelectorAll(".check");
  if(oC.checked==true){
    for(var i=0;i<aInp.length;i++){
      aInp[i].checked=true;
    }
    n=aInp.length;
  }else{
    for(var i=0;i<aInp.length;i++){
      aInp[i].checked=false;
    }
    n=0;
 
  }
}
oTBody.addEventListener("click", chooseFn);
function chooseFn() {
  var aInp = document.querySelectorAll(".check");
  if (event.target.className.includes("check")) {
    if (event.target.checked == true) {
      n++;
    }else{
      n--;
    }
    if(n==aInp.length){
      oC.checked=true;
    }else{
      oC.checked=false;
    }
  }

}
//新增
var oAddSaveBtn = document.querySelector('.addSaveBtn');
oAddSaveBtn.addEventListener('click',addFn)
function addFn(){
  var addName=document.querySelector('.addName').value;
  var addId=document.querySelector('.addId').value;
  var addSrc = document.querySelector('.addSrc').value;
  var addUser = document.querySelector('.addUser').value;

  var addTime = document.querySelector('.addTime').value;
  var addClassfity = document.querySelector('#inlineselect1').selected ? '生活':'睡眠';
  console.log(addClassfity)

  data.push({
    id:addId,
    src:addSrc,
    name: addName,
    user: addUser,
    time: addTime,
    classify: addClassfity,
})
render();
//让模态框隐藏
$('#addModal').modal('hide')

}


var oEditSaveBtn=document.querySelector('.editSaveBtn');
//给所有的编辑按钮加事件
oTBody.addEventListener('click', openEdit);
function openEdit() {
    //判断事件源
    if (event.target.className.includes('edit')) {
        //让编辑框显示
        $('#editModal').modal('show');
        //确认是那个id的数据
        var id=event.target.parentNode.parentNode.children[0].children[0].value;
        //循环数据，找到对应id的，给编辑框赋值
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                document.querySelector('.editId').value =data[i].id ;

                document.querySelector('.editName').value = data[i].name;

                if (data[i].classify == '睡眠') {
                    document.querySelector('#editselect2').selected = true;
                }
                document.querySelector('.editUser').value = data[i].user;
                document.querySelector('.editSrc').value = data[i].src;
                document.querySelector('.editTime').value = data[i].time;
            }
        }
    }

}


//点击修改保存
oEditSaveBtn.addEventListener('click',editSave);
function editSave(){

    var id=document.querySelector('.editId').value;
    for(var i=0;i<data.length;i++){
        if(data[i].id==id){
            data[i].name=document.querySelector('.editName').value;
            data[i].time=document.querySelector('.editTime').value;
            data[i].user=document.querySelector('.editUser').value;
            data[i].src=document.querySelector('.editSrc').value;
            data[i].classify=document.querySelector('#editselect1').selected ? '生活':'睡眠';
        }
    }
    //关闭弹框
    $('#editModal').modal('hide');

    render();
}
//搜索

oSearchBtn.addEventListener('click', searchFn);
function searchFn() {
    page = 1;
    render();
    event.preventDefault();
}

